<template>
    <div id="bmapsss" style="width:50rem;height:50rem"></div>
</template>

<script>
import echarts from "echarts";
require("echarts/map/js/province/henan");
// require("echarts/map/js/geo");
// var henan =
export default {
  data() {
    return {
      mapChart: null
    };
  },
  mounted() {
    // this.initMap();
    // this.initHenan();
    this.jsonMap();
  },
  methods: {
    jsonMap() {
      var url = process.env.BASE_API + "/410300.json";
      this.$fetch({
        url: url,
        method: "get"
      })
        .then(resData => {
          echarts.registerMap("洛阳", resData.data);
          this.initLuoYang();
        })
        .catch(err => {
          console.log(err);
        });
    },
    initLuoYang() {
      var geoCoordMap = {
        西工区: [112.4309294976, 34.6670038363],
        涧西区: [112.3591770197, 34.6610212021],
        洛龙区: [112.4638651322, 34.6236159104],
        老城区: [112.4350295831, 34.7253048201],
        瀍河回族区: [112.4963006537, 34.7039155259]
      };
      var data = [
        { name: "西工区", value: 5 },
        { name: "涧西区", value: 6 },
        { name: "洛龙区", value: 8 },
        { name: "老城区", value: 10 },
        { name: "瀍河回族区", value: 9 }
      ];
      var max = 120,
        min = 2; // todo
      var maxSize4Pin = 30,
        minSize4Pin = 2;

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        title: {
          text: "洛阳门店分布",
          subtext: "",
          x: "center",
          textStyle: {
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (typeof params.value[2] == "undefined") {
              return params.name + " : " + params.value;
            } else {
              return params.name + " : " + params.value[2];
            }
          }
        },
        legend: {
          orient: "vertical",
          y: "bottom",
          x: "right",
          data: ["洛阳门店分布"],
          textStyle: {
            color: "#fff"
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 10,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            color: ["#0f0c29", "#302b63", "#24243e"] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#1488CC', '#2B32B2'] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
          }
        },
        geo: {
          show: true,
          center: [112.4608987892, 34.6649484794], //地图中心点
          map: "洛阳",
          zoom: 6,
          label: {
            normal: {
              show: false,
              color: "white"
            },
            emphasis: {
              show: false,
              color: "white"
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: [
          {
            name: "credit_pm2.5",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9"
              }
            }
          },
          {
            type: "map",
            map: "jiangxi",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077"
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            animation: false,
            data: data
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            symbolSize: function(val) {
              return 9 * val[2];
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 9
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#F62157" //标志颜色
              }
            },
            zlevel: 6,
            data: convertData(data)
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function(val) {
              return val[2] * 6;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
                shadowBlur: 10,
                shadowColor: "#05C3F9"
              }
            },
            zlevel: 1
          }
        ]
      };
      var self = this;
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("bmapsss"));
        self.mapChart.setOption(option);
      }, 10);
    },
    ///引入百度地图
    initMap() {
      var option = {
        // 加载 bmap 组件
        bmap: {
          // 地图中心经纬度，郑州
          center: [113.65, 34.76],
          // 百度地图缩放
          zoom: 19,
          // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
          roam: true,
          // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: [[116.37, 33.94]]
          }
        ]
      };
      this.mapChart = echarts.init(document.getElementById("bmapsss"));
      this.mapChart.setOption(option);
      // 获取百度地图实例，使用百度地图自带的控件
      var bmap = this.mapChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      bmap.setMaxZoom(19);
    }
  }
};
</script>
<style>
</style>
